<template>
  <!-- 韩佳轩 4-5 商品详情-->
  <div class="ShopsView" style="padding-top: 50px; margin-bottom: 50px">
    <div class="center" style="width: 60%; margin: 0 auto">
      <img
        src="@/assets/ClassifyImage/柴犬logo.png"
        style="width: 300px; margin-left: -300px"
      />
      <el-row style="border: 1px solid #e8e8e8;padding: 20px 5%;margin-bottom: 30px;margin-top: -150px;">
        <!-- 左边轮播图 -->
        <el-col :span="12">
          <!-- 大图 -->
          <div class="product-intro" style="width: 100%">
            <div class="preview-wrap">
              <el-carousel style="width: 90%" indicator-position="outside">
                <el-carousel-item
                  v-for="(item, index) in specImages"
                  :key="index"
                  style="background: #ffffff; text-align: center"
                >
                  <el-image fit="cover" :src="item.url"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>
        <!-- 右边商品详情  -->
        <el-col :span="10">
          <div style="">
            <!-- 商品名称 -->
            <p
              style="
                font-size: 22px;
                font-weight: 700;
                line-height: 21px;
                color: #3c3c3c;
                min-height: 21px;
                margin: 4px 0 14px 0;
              "
            >
              {{ shopsMainList.commodityName}}
            </p>

            <!--李享 倒计时组件 -->
            <div v-if="seckillMainList.commId!=null">
              <p style="float: left;font-size:20px;color:red;margin-top: 0px;">
                  限时抢购： 
              </p>
              <CountDown1
                v-on:start_callback="countDownS_cb(1)"
                v-on:end_callback="countDownE_cb(1)"
                :currentTime="seckillMainList.seckillStartDate"
                :startTime=seckillMainList.seckillEndDate
                :endTime=seckillMainList.seckillStartDate
                :dayTxt="'天'"
                :hourTxt="'小时'"
                :minutesTxt="'分钟'"
                :secondsTxt="'秒'"
                style="font-style: normal;color: red;font-size: 20px;">
            </CountDown1>
            </div>

            <!-- 价格&销量 -->
            <div
              style="
                height: auto;
                width: 125%;
                background: #f5f5f5;
                padding: 10px 4%;
                margin-bottom: 10px;
              "
            >
              <p style="height: 35px; font-size: 26px">
                <!-- 优惠 -->
                <span
                  class="favorablePrice"
                  v-if="shopsMainList.favorablePrice"
                >
                  <span>￥</span
                  ><span
                    class="favorablePrice"
                    style="font-weight: 700; color: #00000"
                    >{{ shopsMainList.favorablePrice }}</span
                  >
                  <span
                    style="
                      height: 20px;
                      line-height: 20px;
                      padding: 3px 14px;
                      font-size: 14px;
                      border-radius: 10px;
                      background: #fff200;
                      font-weight: 700;
                      margin-left: 100px;
                      margin-top: -70px;
                    "
                    >限时价</span
                  >
                </span>
                <!-- 销量 -->
                <span
                  style="
                    display: inline-block;
           
                    font-size: 16px;
                    color: #a7a7a7;
                    letter-spacing: -1px;
                    margin-left:-200px
                    line-height: 30px;
                  "
                  >销量：{{ shopsMainList.productPurchaseQuantity }}+</span
                >
                &nbsp;&nbsp;
                <!-- 库存 -->
                <span
                  style="
                    display: inline-block;

                    font-size: 16px;
                    color: #a7a7a7;
                    letter-spacing: -1px;

                    line-height: 30px;
                  "
                  >库存数量：{{ shopsMainList.goodsQuantity }}</span
                >
              </p>

              <!-- 原价 -->
              <span
                style="
                  display: block;
                  width: 100%;
                  font-size: 12px;
                  color: #a7a7a7;
                  text-decoration: line-through;
                "
              >
                <span style="">价格￥{{ shopsMainList.price }}</span>
              </span>
            </div>
            <!-- 商品详情 -->
            <el-tabs class="diyContent">
              <el-tab-pane label="商品详情">
                <p>
                  <span class="diyContent_title" style="font-size: 16px"
                    >简介:</span
                  ><span style="font-size: 16px">{{ shopsMainList.back }}</span>
                </p>
              </el-tab-pane>
              <el-tab-pane label="购买须知">
                <p>
                  <span class="diyContent_title" style="font-size: 14px"
                    >预约信息</span
                  >
                  <span style="font-size: 14px">请您提前一小时预约</span>
                </p>
                <p>
                  <span class="diyContent_title" style="font-size: 14px"
                    >温馨提示</span
                  >
                  <span style="width: 80%; font-size: 14px"
                    >如需商品发票，请您消费时向商户咨询为了保障您的权益，建议使用乐工坊
                    官网、小程序线上支付。若产生其他
                    支付方式纠纷，乐工坊不承担任何责任， 感谢您的理解和支持！
                  </span>
                </p>
              </el-tab-pane>
            </el-tabs>
            <!-- 收藏 -->
            <!-- <el-button style="background:rgb(247,247,247)" class="btn waves" @click="qxshoucang()" v-show="qxshoucang">
              <img style="width: 16px;height: 16px;margin-right: 6px;display: inline-block;vertical-align: middle; "
                src="../../assets/image/收藏.png"/>
              <span style="font-size: 14px;vertical-align: middle;color: rgb(102, 102, 102);">收藏</span>
            </el-button> -->
            <!-- 收藏 -->
            <el-button class="btn waves" style="background: rgb(247, 247, 247)">
              <!-- 未收藏 -->
              <span v-if="isCollection == false">
                <span @click="clickShoucang()">
                  <!--未收藏 -->
                  <svg
                    style="
                      display: inline-block;
                      vertical-align: middle;
                      margin-right: 3px;
                    "
                    t="1681094766692"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2615"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M509.606998 143.114488c9.082866 0 17.327644 4.840238 20.996197 12.331863l97.262184 197.441814c5.613858 11.403724 16.663518 19.358907 29.438473 21.216207l223.738737 32.552393c8.420787 1.215688 15.604396 6.851035 18.23327 14.254655 2.520403 7.18361 0.595564 15.062044-5.084808 20.586874L730.253304 601.611947c-8.949836 8.751315-12.994965 21.171182-10.916631 33.370015l38.011732 222.060515c1.325182 7.737218-2.165316 15.426341-8.905834 19.978007-4.088108 2.741437-8.861832 4.155646-13.812587 4.155646-4.022617 0-7.999185-0.972141-11.425214-2.740414L528.149307 775.671215c-5.768377-3.006474-12.155854-4.552689-18.542308-4.552689-6.364965 0-12.727882 1.547239-18.518772 4.552689L296.254819 878.348736c-3.559059 1.855254-7.602142 2.828418-11.668761 2.828418-4.861728 0-9.723455-1.459235-13.546527-4.022617-6.961552-4.684696-10.475586-12.419867-9.127891-20.155039l38.011732-222.016513c2.078335-12.198833-1.988284-24.619724-10.939143-33.370015L125.02397 441.443038c-5.635347-5.492084-7.55814-13.348006-5.061272-20.453844 2.63092-7.481392 9.812483-13.116739 18.298761-14.332427l223.674269-32.552393c12.839423-1.857301 23.867594-9.813506 29.481452-21.216207l97.194646-197.396789C492.325403 147.965983 500.590648 143.114488 509.606998 143.114488M509.606998 104.904235c-24.043602 0-45.922912 13.226233-56.177464 33.95637L356.189863 336.302419l-223.674269 32.54216c-22.983457 3.304256-42.100864 18.718317-49.481971 39.659255-7.381108 21.048385-1.812275 44.23241 14.431687 60.033281l163.916257 160.125931-38.011732 222.016513c-3.868097 22.408359 6.03239 44.819788 25.458835 57.94676 10.69662 7.116071 23.204491 10.784624 35.757388 10.784624 10.298554 0 20.663622-2.475378 30.055526-7.337105l194.987926-102.7205L704.662463 912.072815c9.369392 4.861728 19.712971 7.337105 29.990035 7.337105 12.57541 0 25.082258-3.668553 35.778878-10.784624 19.426445-13.126972 29.305443-35.538401 25.460882-57.94676l-38.012755-222.016513 163.937746-160.125931c16.22145-15.812127 21.810748-38.984896 14.408151-60.033281-7.402597-20.940938-26.51898-36.353976-49.503461-39.659255L663.04767 336.302419l-97.240695-197.441814C555.619962 118.131491 533.695626 104.904235 509.606998 104.904235L509.606998 104.904235z"
                      fill="#5D5D5D"
                      p-id="2616"
                    ></path>
                  </svg>
                  <span
                    style="
                      font-size: 14px;
                      display: inline-block;
                      vertical-align: middle;
                      color: rgb(102, 102, 102);
                    "
                    >收藏</span
                  >
                </span>
              </span>
              <!-- 已收藏 -->
              <span v-else>
                <span @click="toNoCollection">
                  <svg
                    style="
                      display: inline-block;
                      vertical-align: middle;
                      margin-right: 3px;
                    "
                    t="1681095321677"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7999"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M946.44567 407.179676c-3.706415-11.056823-13.268188-19.154245-24.823362-20.929682l-263.117606-40.614L540.930913 93.91802c-5.108345-10.93198-16.071024-17.939581-28.155247-17.971303-0.030699 0-0.062422 0-0.062422 0-12.021801 0-22.985504 6.945179-28.155247 17.84646L365.79001 345.247138l-263.917832 39.507806c-11.399631 1.961678-20.774139 10.060123-24.355711 21.054525-3.613294 10.963703-0.778736 23.047926 7.257288 31.332612l191.202717 196.684568-45.6282 277.132808c-1.930979 11.741415 3.0208 23.608697 12.769838 30.491455 9.717316 6.882757 22.549575 7.630794 32.983205 1.868557l235.366565-129.47177 234.868215 130.282229c4.703115 2.616594 9.904581 3.924379 15.106046 3.924379 6.291287 0 12.551874-1.868557 17.877159-5.699816 9.748015-6.852058 14.763239-18.687618 12.862959-30.460756L747.488339 634.635061l191.669344-195.84341C947.286828 430.476265 950.121386 418.2365 946.44567 407.179676z"
                      fill="#2c2c2c"
                      p-id="8000"
                    ></path>
                  </svg>
                  <span
                    style="
                      font-size: 14px;
                      display: inline-block;
                      vertical-align: middle;
                      color: rgb(102, 102, 102);
                    "
                    >已收藏</span
                  >
                </span>
              </span>
            </el-button>
            <p style="font-family: STSong" v-html="shopsMainList.buy"></p>
            <el-button round style="width: 260px" @click="goBuy()"
              >立即购买</el-button
            >
            <el-button
              round
              style="width: 100px; background: rgb(237, 178, 28)"
              @click="goAddCar()"
              ><i class="el-icon-shopping-cart-2" style="color: black"></i
            ></el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 评价&商家 -->
      <div
        class="center_bottom"
        style="border: 1px solid #e8e8e8; padding: 20px 2%"
      >
        <!-- 评价模块 -->
        <div
          class="appraise"
          style="
            width: calc(68% - 1px);
            margin-right: 2%;
            border-right: 1px solid rgb(232, 232, 232);
          "
        >
          <p style="height: 30px; line-height: 30px; color: #333">
            <span
              style="font-size: 20px; font-weight: 700; margin-right: 6px"
              >{{ pages.total }}</span
            >
            <span style="font-size: 16px; color: #333; font-weight: 400">条商品评价</span>
            <span class="star" style="margin-left: 20px">
              <!-- 星级评分 -->
              <el-rate
                style="display: inline-block"       
                :value="parseFloat(diyInfo.value)"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}"
              >
              </el-rate
            ></span>
          </p>
          <!-- 小提示 -->
          <p style="font-size: 12px; color: #3f3f3f; margin: 2px 0">
            如需商品发票，请消费时向商户咨询
          </p>
          <!-- 评价列表 -->
          <div style="padding: 10px 0 20px 0; border-bottom: 1px solid #e8e8e8"
            v-for="(item, index) in appraiseList" :key="index">
            <!-- 评价内容 -->
            <p
              style="
                font-size: 14px;
                line-height: 1.4;
                color: #3f3f3f;
                padding-top: 10px;
              "
            >
              {{ item.content }}
            </p>
            <!-- 评论照片 -->
            <el-row style="margin-top: 20px; margin-bottom: 10px">
              <el-col
                :span="4"
                v-for="(item, index) in item.imagess"
                :key="index"
                style="text-align: left"
              >
                <el-image
                  style="width: 100px; height: 100px; border-radius: 4px"
                  :src="item.url"
                  fit="cover"
                >
                </el-image>
              </el-col>
            </el-row>
            <!-- 评价内容 -->
            <div class="appraiseContent">
              <!-- 头像 -->
              <span style="width: 40px; height: 40px; margin-right: 14px">
                <el-avatar
                  :src="item.avatarUrl"
                  style="width: 40px; height: 40px"
                ></el-avatar>
              </span>
              <!-- name -->
              <span
                style="
                  width: 100px;
                  height: 40px;
                  margin-right: 10px;
                  font-size: 14px;
                  font-weight: 400;
                  color: #404040;
                  line-height: 40px;
                "
              >
                {{ item.nickName }}
              </span>
              <!-- 发布日期 -->
              <span
                style="
                  width: 200px;
                  height: 40px;
                  margin-right: 10px;
                  font-size: 12px;
                  color: #b0b0b0;
                  line-height: 40px;
                "
              >
                {{ item.createTime }}
              </span>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            @current-change="upPageNum"
            :current-page.sync="pages.currentPage4"
            :page-size="pages.pageSize"
            background
            layout="prev, pager, next"
            :total="pages.total"
            style="margin-top: 30px; text-align: center"
          >
          </el-pagination>
        </div>
        <!-- 商家地址信息 -->
        <MerchantInfo></MerchantInfo>
      </div>
    </div>
  </div>
</template>

<script>
import MerchantInfo from "@/components/map/MerchantInfo.vue";
import CountDown1 from 'vue2-countdown'
export default {
  name: "ShopsView",
  data() {
    return {
      // 秒杀商品id
      commId: 0,
      //id是商品id
      id: this.$route.query.id,
      //商品名
      commodityName: '',
      //收藏状态
      isCollection: false,
      //优惠价格
      favorablePrice: "",
      //库存数量
      goodsQuantity: "",
      //原价
      price: "",
      //备注
      back: "",
      //销量
      productPurchaseQuantity: "",
      //商品信息数组
      shopsMainList: [],
      seckillMainList: [],
      //轮播图下面的小图片
      specImages: [
       { url: require("../../assets/ClassifyImage/youkll.jpg") },
       { url: require("../../assets/ClassifyImage/youkll.jpg") },
       { url: require("../../assets/ClassifyImage/youkll.jpg") },
       { url: require("../../assets/ClassifyImage/youkll.jpg") },
      ],
      diyInfo: {
        //商品评分
        value:0,
      },
      //评论的用户
      nickName: "",
      //评论的内容
      content: "",
      //用户头像
      avatarUrl: "",
      //创建时间
      createTime: "",
      //照片组
      pictureGroup: "",
      //用户id
      userId: window.sessionStorage.getItem('userId'),
      //分页
      pages: {  
        //数据总条数
        total: 0,
        //当前页
        pageNum: 1,
        //每页几条数据
        pageSize:3,
        // 分页显示第几页
        currentPage4: 1,
      },
      //商品评价数组
      appraiseList: [],
      //立即购买订单数组
      ShopsArr: [],
      // 存放token
      token: '',
    };
  },
  components: {
    //地图组件
    MerchantInfo,
    //倒计时插件
    CountDown1
  },

  mounted() {
    //初始化商品详情
    this.getShopsMain();
    //初始化商品详情下的评论
    this.getShopsMainComments();
    //初始化获取商品收藏状态(点击页面后商品是否收藏)
    this.getCollectionStatus();
    //给评论计算评分
    this.getScore();
    // 李享 初始化秒杀商品信息
    // this.getSeckillMain()
    //获取token
   this.token = sessionStorage.getItem('token')
   //声明id
   this.id = this.$route.query.commodityId || this.$route.query.id
  },
  methods: {
    //添加购物车
    goAddCar() {   
      if (this.token !== null) {
        //实体类接口
        const commodityInfo = {
          userId: this.userId,
          commodityId: this.id, 
          businessName: "乐工坊",
          number: 1,
          isNoDiy: 0,
        };
        //添加购物车请求
        this.$axios
          .post("/shoppingCart/saveShoppingCart", commodityInfo)
          .then((res) => {
            if (res.data.flag) {
              // console.log(res)
              this.myMessage("success", "添加成功");
            }
          })
          .catch((err) => {
            this.myMessage("error", err);
        });
      } else {
        this.myMessage("error", "请先登录");
      }
    },
    //点击取消收藏方法
    toNoCollection() {
      //传送请求的传值方式
      const param1 = {
        userId: this.userId,
        commodityId: this.id,
      };
      this.$axios
        .post("/commodityCollection/deleteByUserIdAndDiyId", param1)
        .then((res) => {
          //获取收藏状态
          if (res.data.data == 1) {
            //修改成功
            this.getCollectionStatus();
          } else {
            this.myMessage.error("修改商品收藏状态失败！");
          }
        })
        .catch((error) => {
          this.myMessage.error("修改商品收藏状态失败！");
        });
    },
    //点击收藏方法
    clickShoucang() {
        if (this.token== null) {
            this.myMessage("error",'请先登录')
        }
      const param = {
        userId: this.userId,
        commodityId: this.id,
      };
      this.$axios
        .post("/commodityCollection/insertCommodityCollection", param)
        .then((res) => {
          //获取收藏状态
          if (res.data.data == 1) {
            //修改成功
            this.getCollectionStatus();
          } else {
            this.myMessage.error("修改商品收藏状态失败！");
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    //获取收藏状态(点击页面后显示商品是否收藏)
    getCollectionStatus() {
      //获取Id 获取UserId
      this.$axios
        .get("/commodityCollection/selectCollection", {
          //获取请求的传值方式
          params: {
            userId: this.userId,
            commodityId: this.id,
          },
        })
        .then((res) => {
          //获取收藏状态
          if (res.data.data) {
            this.isCollection = true;
          } else {
            this.isCollection = false;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    //立即购买
    goBuy() {
        //  if (this.token!== null) {
        //     this.$router.push('/PageMain')
        // } else {
        //     this.myMessage("error",'请先登录')
        // }
      // console.log(this.id)
      this.ShopsArr.push({ id: this.id,commodityName:this.commodityName, number: 1 });
      this.$router.push({
        path: "/SubmitOrder",
        query: {
          commodityArr: this.$Base64.encode(JSON.stringify(this.ShopsArr)),
          diyArr: this.$Base64.encode(JSON.stringify([])),
        },
      });
      this.ShopsArr = [];
      
    },
    //李享 限时秒杀商品详情
    getSeckillMain(){
      this.$axios.get("/seckill/getSeckillMain?id=" + this.id, {
          })
          .then((res) => {
            if (res.data.flag) {  
              if(res.data.data != null & res.data.data != ''){
                 //[0]是因为我后台返回的方法list数组
                this.seckillMainList = res.data.data[0];
                // console.log(res.data.data+"返回数据");
                // 判断是否为秒杀商品，如果是秒杀商品，原价改为秒杀价，原库存改为秒杀库存 
                if(this.seckillMainList != null ){
                  if(this.seckillMainList.commId!=null){
                    this.shopsMainList.seckillMainList = this.seckillMainList.seckillMainList
                    this.shopsMainList.favorablePrice = this.seckillMainList.seckillPrice
                    this.shopsMainList.goodsQuantity = this.seckillMainList.seckillStock
                }
                // 倒计时时间转换
                this.seckillMainList.seckillStartDate = parseInt(new Date().getTime() / 1000)
                this.seckillMainList.seckillEndDate = parseInt(new Date(this.seckillMainList.seckillEndDate).getTime() / 1000)
                }
              }     
            }
          })
          .catch((err) => {
            this.myMessage("error", err);
          });
    },
    //详情信息全查
    getShopsMain() {
      // 根据商品列表查商品详情
      //  根据id跳转路由 this.id是commtdiyId
      const id = this.id;
      this.$axios.get("/commodity/classify/getShopsMain?id=" + id, {
          params: {
            //当前页
            //pageNum: this.pages.pageNum,
            //每页几条数据
            // pageSize: this.pages.pageSize,
          },
        })
        .then((res) => {
          if (res.data.flag) {
            //[0]是因为我后台返回的方法list数组
            this.shopsMainList = res.data.data[0];
            this.commodityName = this.shopsMainList.commodityName
            
            //轮播图图片 分割,变成数组
            // this.shopsMainList.imageId = this.shopsMainList.imageId.split(",");
            this.shopsMainList.imageViewId =this.shopsMainList.imageViewId.split(",");
            //清空当前数组
            this.specImages = [];
            //遍历循环轮播图 存入到数组中
            // for (var a in this.shopsMainList.i·mageId) {
            //   this.specImages.push({
            //     url:
            //       this.$imageUrl+"?id=" +
            //       this.shopsMainList.imageId[a],
            //   });
            // }
            for (var a in this.shopsMainList.imageViewId) {
              this.specImages.push({
                url:this.$imageUrl+"?id="+this.shopsMainList.imageViewId[a],
              });
            }
            // 轮播图 在完全加载后再执行函数
            this.indicatorToimage();
            // this.shopsMainList.imageId.forEach(a =>{
            //   this.specImages.push({url:'imageUrl+'?id=''+ a})
            // })
            // this.shopsMainList.imageViewId.forEach(a =>{
            //   this.specImages.push({url:'imageUrl+'?id=''+a})
            // })
            // 查询是否是秒杀商品
            this.getSeckillMain()
          }
        })
        .catch((err) => {
          // this.myMessage("error", err);
        });
    },

    //评论全查＋分页
    getShopsMainComments() {
      //  根据id跳转路由
     
      this.$axios
        .get("/commodity/classify/getShopsMaincomments?id=" ,
          {
            params: {
              id: this.id,
              //  当前页
              pageNum: this.pages.pageNum,
              //每页几条数据
              pageSize: this.pages.pageSize,
            },
          }
        )
        .then((res) => {
          if (res.data.flag) {
            //获取数据
            this.appraiseList = res.data.data.content;
            // 判断是否有数据
            if (this.appraiseList) {
              // 遍历list生成新的评论图片列表
              for (let index = 0; index < this.appraiseList.length; index++) {
                //分割变成数组
                this.appraiseList[index].pictureGroup =this.appraiseList[index].pictureGroup.split(",");
                //清空当前数组
                this.appraiseList[index]["imagess"] = [];
                //遍历图片数组
                for (var a in this.appraiseList[index].pictureGroup) {
                  this.appraiseList[index]["imagess"].push({url:this.$imageUrl+"?id="+
                      this.appraiseList[index].pictureGroup[a],
                  });
                }
                // console.log(this.appraiseList[index].imagess);
              }
            }
             
            //条数
            this.pages.total = res.data.data.totalSize;
            //给评论的星级评分赋值（死的）
            // this.diyInfo.value =res.data.data.content[0].productDescriptionRating;
            // console.log(this.diyInfo)
            //给评论的星级评分赋值（活的）
            // this.aa=0;
            // this.appraiseList.forEach((item)=>{
            // this.aa += item.productDescriptionRating
            // })
            // this.diyInfo.value=(this.aa/this.appraiseList.length).toFixed(1)
            // console.log(this.appraiseList)
            // console.log(this.aa)
          }
        })
        .catch((err) => {
          this.myMessage("error", "获取评论失败！");
        });
    },
    //给评论评分计算
    getScore(){
       this.$axios.get("/commodity/classify/getShopsScore",{
    })
    .then((res) => {
          if (res.data.flag) {
          // 获取全查数据 this.appraiseList = res.data.data
          //获取评分数据
           this.diyInfo.value=(res.data.data).toFixed(1)
          }
    }).catch((err) => {
          this.myMessage("error", "err");
        });
  },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    //   将轮播图指示器渲染成图片
    indicatorToimage: function () {
      var a = document.querySelectorAll(".el-carousel__button");
      // console.log(a);
      for (let i in this.specImages) {
        //添加一个img
        let img = document.createElement("img");
        //定义图片大小
        img.style.width = "50px";
        img.src = this.specImages[i].url;
        //加到button里面
        a[i].appendChild(img);
      }
    },
    //改变页码
    upPageNum(val) {
      this.pages.pageNum = val;
      this.getShopsMainComments();
    },
  },
};
</script>

<style scoped>
/*消除默认按钮边框*/
.btn {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  font-family: Helvetica;
  font-size: 16px;
  color: rgb(241, 237, 237);
  border: none;
  outline: none;
}
.btn:hover {
  opacity: 0.8;
}
/*全局*/
p {
  margin: 6px 0;
}
.appraiseContent span {
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  line-height: 40px;
}
/*上面问题*/

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播图样式 */
.preview-wrap .el-carousel {
  width: 350px;
  height: 400px;
}
.preview-wrap /deep/.el-carousel__button {
  width: 50px;
  height: 50px;
}
/*优惠*/
.favorablePrice {
  display: inline-block;
  height: 30px;
  width: 80%;
}
.favorablePrice span {
  display: inline-block;
  vertical-align: middle;
}
/*选项卡*/
::v-deep .el-tabs__nav-wrap::after {
  width: 50%;
}
::v-deep .el-tabs__item.is-active {
  color: #303134;
  font-weight: 800;
}
::v-deep .el-tabs__active-bar {
  background-color: #303134;
}
::v-deep .el-tabs__item:hover {
  color: #303134;
  font-weight: 800;
}
.diyContent span {
  color: #868686;
  font-weight: 500;
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
}
::v-deep .el-tabs__content {
  padding-left: 30px;
  height: 100px;
  overflow: auto;
  height: 100px;
}
.diyContent_title {
  width: 20%;
  display: inline-block;
}

.recommendedScenarios {
  margin-right: 8px;
}
.el-button.is-round {
  border-radius: 20px;
  padding: 12px 23px;
  border: none;
  font-weight: 700;
  color: #fff200;
  font-size: 18px;
  background: #000000;
}
/*评价&地图*/
.center_bottom > div {
  display: inline-block;
  vertical-align: top;
}
/*分页*/
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f7d448;
  color: #fff;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f7d448;
  color: #fff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #f7d448;
}
</style>